<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>响应式原理-异步更新队列-2</title>
</head>
<body>
    <template id="template-1">
        <p @click="updateMsg">{{msg}}</p>
    </template>
    <div id="example">
        <example-1></example-1>
    </div>
    <script src="../lib/vue.js"></script>
<script>
    /*
    * 使用vm.$nextTick()方法比较方便，无需全局Vue，它的回调this自动绑定到当前Vue实例上
    * */
    Vue.component('example-1', {
        template : '#template-1',
        data : function(){
            return {
                msg : 'welcome to javascript world!'
            }
        },
        methods : {
            updateMsg : function () {
                console.log(this);
                this.msg = "hello vue.js";
                console.log(this.$el.textContent === "hello vue.js");
                this.$nextTick(function () {
                    console.log(this.$el.textContent === "hello vue.js");
                })
            }
        }
    })
    var exampleVm = new Vue({
        el : '#example'
    })
</script>
</body>
</html>